// 导入reactDOM  cliect代表是渲染在浏览器的dom
import ReactDOM from "react-dom/client";
import "./index.css";

// 定义数组
const data = [
  {
    month: "三月",
    day: "20",
    title: "vue",
    time: "40分钟",
  },
  {
    month: "四月",
    day: "25",
    title: "react",
    time: "40分钟",
  },
  {
    month: "六月",
    day: "21",
    title: "javascript",
    time: "40分钟",
  },
  {
    month: "七月",
    day: "22",
    title: "css",
    time: "40分钟",
  },
];

const App = (
  <div className="logs">
    {data.map((item,index) => {
      return (
        <div className="item" key={index}>
          {/* 日期 */}
          <div className="date">
            <div className="month">{item.month}</div>
            <div className="day">{item.day}</div>
          </div>
          {/* 内容 */}
          <div className="content">
            <div className="desc">{item.title}</div>
            <div className="time">{item.time}</div>
          </div>
        </div>
      );
    })}
  </div>
);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(App);
